<template>
	<view class="container">
	<scroll-view scroll-y="false" class="scroll" @scroll="scrollChnage" 
	> 
		<!-- <view class="top-section"></view> -->
		<view class="navbar-section" :class="{'navbar-fixed-section': isFixed}">
			<ss-navbar :tabCurrentIndex="currentIndex" @navbarTap="navbarTapHandler"></ss-navbar>
		</view> 
		<view class="bottom-section" v-if="currentIndex ==0">
			
			<Allorder style="height: 93%;position: top; width: 100%;" @child1="gotothisorderdetail"></Allorder>
			
		</view>
		<view class="bottom-section" v-if="currentIndex ==1">
			<Yixiadan   style="height: 93%;position: top; width: 100%;background-color: #F4F4F4;" @child1="gotothisorderdetail"></Yixiadan>
		</view> 
		
		<view class="bottom-section" v-if="currentIndex ==2">
			<Havenotpay style="height: 93%;position: top; width: 100%;background-color: #F4F4F4;" @child1="gotothisorderdetail"></Havenotpay>
		</view>
		
		<view class="bottom-section" v-if="currentIndex ==3">
			<Havefinished style="height: 93%;position: top; width: 100%;background-color: #F4F4F4;" @child1="gotothisorderdetail"></Havefinished>
		</view>
	
		
	</scroll-view> 
	


	</view>
</template>

<script>
	import ssNavbar from '@/components/ss-navbar/ss-navbar.vue'
	import Allorder from "./components/allorder.vue"
	import Yixiadan from "./components/yixiadan.vue"
	import Havenotpay from "./components/havenotpay.vue"
	import Havefinished from "./components/havefinished.vue"
	
	// import uniFab from '@/components/uni-fab/uni-fab.vue';

	export default {
		components: {
			ssNavbar,Allorder,Yixiadan,Havenotpay,Havefinished
		},
		data () {
			return {
				currentIndex: 0,
				isFixed: false,
				topHeight: 0,
				test:"",
				tabClick: false, // true 表示是两次点击中的第一次点了 tabBar,
				
			} 
		},
		
		//第一次加载需要刷新
		onLoad (options) {
			// 用户未登录情况
			if(uni.getStorageSync("token")==""){
				uni.showModal({
					title:"请先登陆",
					showCancel:false,
					success() {
						uni.switchTab({
							url:"../me/mecentre"
						})
					}
				});
			}
			else{
			
			uni.setNavigationBarTitle({
				title: options.title
			});
			this.calculateTopSectionHeight();
			uni.showToast({
				title:"初始化了"
			})
			
			uni.request({
				url:getApp().globalData.http+"/order/getallorder",
				method:"GET",
				header:{
					'Authorization' : uni.getStorageSync("token")
				},
				success: (res) => {
					
		
					uni.setStorageSync("data",res.data)
					
					Allorder.mounted()
						
				}
			})
			 getApp().firstin="false"
			}
		},
		methods: {
			navbarTapHandler (index) {
				uni.showToast({
					title:index.toString()
				})
				this.currentIndex = index;
				
				
				if(this.currentIndex==0){
					uni.request({
						url:getApp().globalData.http+"/order/getallorder",
						method:"GET",
						header:{
							'Authorization' : uni.getStorageSync("token")
						},
						success: (res) => {
							
							uni.setStorageSync("data",res.data)
						
							// Allorder.onLoad()
							Allorder.mounted()
	
						}
					})
				}
				else if(this.currentIndex==1){
					// getApp().finishedorder="我变了"
					// Hasfinished.mounted()
					this.currentIndex=4
					uni.request({
						url:getApp().globalData.http+"/order/orders_finished",
						method:"GET",
						header:{
							'Authorization' : uni.getStorageSync("token")
						},
						success: (res) => {
							
							uni.setStorageSync("data2",res.data)	
							// Allorder.onLoad()
							Yixiadan.mounted()
							this.currentIndex=1
						
						}
					})

				}
				
				else if(this.currentIndex==2){
					this.currentIndex=4
					uni.request({
						url:getApp().globalData.http+"/order/orders_havenotpay",
						method:"GET",
						header:{
							'Authorization' : uni.getStorageSync("token")
						},
						success: (res) => {
							
							uni.setStorageSync("data3",res.data)	
							// Allorder.onLoad()
							Havenotpay.mounted()
							this.currentIndex=2
						
						}
					})
				
				}
				else if(this.currentIndex==3){
					this.currentIndex=4
					uni.request({
						url:getApp().globalData.http+"/order/finished",
						method:"GET",
						header:{
							'Authorization' : uni.getStorageSync("token")
						},
						success: (res) => {
							
							uni.setStorageSync("data4",res.data)	
							
							Havefinished.mounted()
							this.currentIndex=3
						
						}
					})
				
				}
				
				
			},
			scrollChnage (e) {
				let top = e.detail.scrollTop;
				if (top >= this.topHeight) {
					this.isFixed = true;
				} else {
					this.isFixed = false;
				} 
				
			},
			/**
			 * 计算头部视图的高度
			 */
			calculateTopSectionHeight () {
				var that = this;
				let topView = uni.createSelectorQuery().select(".top-section");
				topView.fields({
					size: true
				}, data => {
					that.topHeight = data.height;
				}).exec();
			},
			gotothisorderdetail(data){
				uni.navigateTo({
					url:"currentorder?orderid="+data
				
				})
				
			}
			// //全部订单页面回到顶部
			// gototop(){
				
			// 	uni.setStorageSync("currenttop",0)
			// 	uni.showToast({
			// 		title: uni.getStorageSync("currenttop").toString()
			// 	});
			// },
			
			
			
		},
		
		
		//当提交订单后显示需要重新刷新
		onShow() { 
			// 用户未登录情况
			if(uni.getStorageSync("token")==""){
				uni.showModal({
					title:"请先登陆",
					showCancel:false,
					success() {
						uni.switchTab({
							url:"../me/mecentre"
						})
					}
				});
			}
			else{
				if(getApp().submitorder=="true"||getApp().firstlogin=="true"){
					this.currentIndex=4
					uni.request({
						url:getApp().globalData.http+"/order/getallorder",
						method:"GET",
						header:{
							'Authorization' : uni.getStorageSync("token")
						},
						success: (res) => {
							getApp().submitorder="false"
							getApp().firstlogin="false"
							this.currentIndex=0
							// this.test=res.data[1]
							// getApp().allorder=this.test.orders
							// getApp().allorder=res.data
							uni.setStorageSync("data",res.data)
							uni.setStorageSync("currenttop",0)
							Allorder.mounted()
								
						}
					})
				}
				else{
					return;
				}
		
			}
		
		},
		
		//双击tabbar可刷新
		onTabItemTap() {
			if (this.tabClick) { // 200ms 内再次点击
							// 这里就是模拟的双击事件，可以写类似数据刷新相关处理
				
				
				//如果当前在全部订单页面
				if(this.currentIndex==0){
					this.currentIndex=4
					uni.request({
						url:getApp().globalData.http+"/order/getallorder",
						method:"GET",
						header:{
							'Authorization' : uni.getStorageSync("token")
						},
						success: (res) => {
							this.currentIndex=0
							uni.setStorageSync("data",res.data)
							Allorder.mounted()	
						}
					})			
				}
				//如果当前在已完成页面
				else if(this.currentIndex==1){
					this.currentIndex=4
					uni.request({
						url:getApp().globalData.http+"/order/orders_finished",
						method:"GET",
						header:{
							'Authorization' : uni.getStorageSync("token")
						},
						success: (res) => {
							this.currentIndex=1
							uni.setStorageSync("data2",res.data)
							Yixiadan.mounted()	
						}
					})			
				}
				
				//如果当前在待消费页面
				else if(this.currentIndex==2){
					this.currentIndex=4
					uni.request({
						url:getApp().globalData.http+"/order/orders_havenotpay",
						method:"GET",
						header:{
							'Authorization' : uni.getStorageSync("token")
						},
						success: (res) => {
							this.currentIndex=2
							uni.setStorageSync("data3",res.data)
							Havenotpay.mounted()	
						}
					})			
				}
				
				
				
				
				
							
							
				}
				this.tabClick = true
					setTimeout(() => {
						this.tabClick = false // 200ms 内没有第二次点击，就当作单击
					}, 200)
		
		}
		
		
	}
</script>

<style lang="scss" scoped>
	.scroll {
		position: absolute;
		top: 0upx;
		left: 0upx;
		bottom: 0upx;
		right: 0upx;
		
		.navbar-fixed-section {
			position: fixed;
			top: 0upx;
			left: 0upx;
			right: 0upx;
		}
		
		.top-section {
			
			background-color: green;
		}
		
		.bottom-section {
			height: 100%;
			width: 100%;
			// margin-top: 20px; 
			position: fixed;

			background-color: #F4F4F4;
		}
		
		.footer-section {
			height: 1500upx;
			background-color: blue;
		}
		.container{
			background-color: #007AFF;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
</style>



